<template>
    <el-dialog class="abow_dialog" :close-on-click-modal="false" width="1200px" v-model="visible" @close="handleClose" title="售后管理">
        <div style="display: flex; margin-bottom: 20px">
            <div class="xinxi" style="margin-right: 50px; width: 40%">
                <div class="title">收货人信息</div>
                <div>收货人：{{ tableDatas?.order_delivery[0]?.send_name }}</div>
                <div>联系电话：{{ tableDatas?.order_delivery[0]?.send_mobile }}</div>
                <div>收货地址：{{ tableDatas?.order_delivery[0]?.send_full_address }}</div>
            </div>
            <div class="xinxi" style="width: 40%">
                <div class="title">发货信息</div>
                <div>快递类型：{{ tableDatas?.order_delivery[0]?.company?.company_name }}</div>
                <div>快递单号：{{ tableDatas?.order_delivery[0]?.express_number }}</div>
                <div>发货时间：{{ tableDatas?.create_time }}</div>
            </div>
            <div class="xinxi" style="width: 20%">
                <div style="color: red">状态：{{ tableDatas?.status_name?.name }}</div>
            </div>
        </div>
        <el-table :data="tableDatas?.order_goods" border style="width: 100%" :span-method="objectSpanMethod">
            <el-table-column prop="name" label="商品信息" width="250">
                <template #default="scope">
                    <div style="display: flex; align-items: center; margin-bottom: 12px">
                        <el-image
                            style="width: 100px; height: 130px"
                            :src="scope.row.goods_image"
                            :fit="scope.row.goods_name"
                            :preview-src-list="[scope.row.goods_image]"
                            hide-on-click-modal
                            preview-teleported
                        />
                        <div style="flex: 1; margin-left: 12px">
                            <div>{{ scope.row.goods_name }}</div>
                            <div>{{ scope?.row.card?.ean }}</div>
                            <div>{{ scope?.row.card?.tags }}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="单价" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center; height: 130px">￥{{ scope.row.price }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品类别" width="200">
                <template #default="scope">
                    <div style="display: flex; align-items: center; height: 130px">
                        {{ scope.row.sku_name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="数量" width="130">
                <template #default="scope">
                    <div style="display: flex; align-items: center; height: 130px">{{ scope.row.num }}张</div>
                </template>
            </el-table-column>
            <el-table-column prop="goods_money" label="商品总价">
                <template #default="scope">
                    <div style="display: flex; align-items: center; height: 130px">
                        {{ tableDatas?.goods_money }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="box_s">
            <div>开箱视频：</div>
            <video ref="videoRef" :src="tableDatas?.unboxing_video" width="200" height="400" autoplay controls @timeupdate="handleTimeUpdate"></video>
        </div>
        <div class="box_s" v-if="tableDatas?.consult_money != '0.00'">
            <div>协商价格：{{ tableDatas?.consult_money }}</div>
        </div>
        <div class="box_s" v-if="tableDatas?.is_consult == 1">
            <div>协商结果：不同意</div>
        </div>
        <div class="box_s">
            <div>原因：{{ tableDatas?.shop_remark }}</div>
        </div>
        <!-- <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSave"> 确定 </el-button>
        </template> -->
    </el-dialog>
</template>
<script setup>
import { watch, ref, reactive, nextTick } from 'vue'
import createAxios from '/@/utils/axios'
import { ElMessage } from 'element-plus'
import { log } from '/@/api/backend/routine/AdminInfo'

const props = defineProps({
    modelValue: Boolean,
    data: Object,
    cateid: Number,
})
let videoUrl = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/Bao.mp4')
let visible = ref(false)
let form = ref({}) // 表单数据
let formRef = ref(null) // 表单实例
let loading = ref(false) // 表单加载状态

watch(
    () => props.modelValue,
    (val) => {
        visible.value = val
        if (val) {
            nextTick(() => {
                // console.log("props", props.cateid);
                if (props.cateid) {
                    getData(props.cateid)
                }
            })
        }
    },
    { deep: true }
)
let tableDatas = ref()
function getData(cateid) {
    // console.log("bhhywgdy", cateid);
    createAxios({ url: '/admin/order.Refund/detail', method: 'get', params: { order_id: cateid } }).then((res) => {
        tableDatas.value = res.data
        console.log('idddd', tableDatas.value)
    })
}
const emits = defineEmits(['close', 'update'])
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {}
//关闭操作
const handleClose = () => {
    emits('close', false) // 可以更新 v-model 绑定的值
}
</script>
<style scoped lang="scss">
.abow_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    .el-dialog {
        margin: 0 auto !important;
        height: 90%;
        overflow: hidden;
        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
}
.xinxi {
    .title {
        font-size: 17px;
    }
}

.box_s {
    margin-top: 20px;
    display: flex;

    .videos {
        width: 100px;
        height: 100px;
    }
}
</style>
